<template>
	<!-- 公告详情 -->
	<view class="notice-container">
		<view class="title">{{detail.name}}</view>
		<view class="content" v-html="detail.content"></view>
		<view class="date">{{detail.crated_at}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// id
				id: '',
				// 详情
				detail: {}
			}
		},
		methods: {
			/**
			 * 获取公告详情
			 */
			getNoticeDetail() {
				this.$request.post({
					url: '/api/common/noticeDetail',
					data: {
						id: this.id
					},
					success: res => {
						console.log(res)
						if (res.code != 200) return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.detail = res.result
					}
				})
			}
		},
		onLoad(options) {
			if (!options.id) return uni.navigateBack()
			this.id = options.id
			this.getNoticeDetail()
		}
	}
</script>

<style lang="less" scoped>
	.notice-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;
		padding: 40rpx;
		box-sizing: border-box;

		.title {
			width: 100%;
			text-align: center;
			font-size: 48rpx;
			font-family: Source Han Sans-Medium, Source Han Sans;
			font-weight: 500;
			color: #333333;
			line-height: 70rpx;
			margin-top: 80rpx;
		}

		.content {
			width: 100%;
			text-align: justify;
			margin-top: 80rpx;
			font-size: 28rpx;
			font-family: Source Han Sans-Medium, Source Han Sans;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
			letter-spacing: 1px;
		}

		.date {
			width: 100%;
			text-align: right;
			margin-top: 80rpx;
			font-size: 28rpx;
			font-family: Source Han Sans-Medium, Source Han Sans;
			font-weight: 500;
			color: #999;
			line-height: 28rpx;
			letter-spacing: 1px;
		}
	}
</style>